<template>
  <Modal v-model="visible" title="历史佣金导入" :closable="false" :mask-closable="false" width="400">
    <div class="step">
      <h4>第一步</h4>
      <p>请按照数据模板的格式准备导入数据</p>
      <span style="color: #4876FF; cursor: pointer;" @click="onDownload">下载导入模板</span>
    </div>
    <div class="step">
      <h4>第二步</h4>
      <p>请添加已核销完毕的订单，</br>请确保录入的产品、房号与DT系统中一致</p>
    </div>
    <div class="step">
      <h4>第三步</h4>
      <p>请上传已填写的“佣金数据”</p>
      <div>
        <Upload ref="upload"
        	:action="upload.reqUrl"
        	:headers="upload.headers"
        	:data="upload.data"
        	:show-upload-list="false"
        	accept=".xls, .xlsx, .XLS, XLSX"
          :max-size="10240"
          :on-exceeded-size="onExceededSize"
          :before-upload="onBeforeUpload"
          :on-success="onSuccess"
          style="margin: 5px 0;"
        >
          <Button>上传文件</Button>
        </Upload>
        <p v-if="file">{{ file.name }}</p>
      </div>
    </div>
    
    <div slot="footer" class="footer">
      <Button @click="hide">取消</Button>
      <Button type="primary" :loading='loading' @click="onConfirm">导入</Button>
    </div>
  </Modal>
</template>

<script>
  import initiateMgr from '@/biz/commission/initiate.js'

  export default {
    props: {
			data: Object,
      refresh: Function
    },
    data() {
      return {
        visible: false,
        loading: false,
        upload: initiateMgr.commissionImport(),
        file: null,
      }
    },
    methods: {
      onConfirm() {
        if (!this.file) {
          this.$Message.error('请选择文件')
          return
        }
        this.loading = true
        this.$refs.upload.post(this.file)
      },
      // 上传成功
      onSuccess(res, file, fileList) {
        this.loading = false
        if (res.code == '200') {
          if (res.data) {
            this.$Modal.error({
              render: (h) => {
                let data = res.data.split('\r\n'),
                    arr = []
                for (let item of data) {
                  arr.push(h('p', item))
                }
                return h('div', arr)
              }
            })
          } else {
            this.$Message.success('导入成功')
            this.$emit('success')
            this.hide()
          }
        } else {
          this.$Message.error(res.msg)
        }
      },
      onBeforeUpload(file) {
        this.file = file
        return false
      },
      // 文件超过大小
      onExceededSize(file) {
        this.$Message.warning('最大支持10M')
      },
      onDownload() {
        initiateMgr.commissionTemplate({
          fileName: '历史佣金导入模板.xls'
        })
      },
      show() {
        this.loading = false
        this.file = null
        this.visible = true
      },
      hide() {
        this.visible = false
      },
    },
  }
</script>

<style lang='scss' scoped>
  .step {
    margin: 0 0 24px 10px;
    h4 {
      margin-bottom: 5px;
    }
  }
</style>